<template>
  <div class="ElectricProgressBar1">
    <div class="pro-w">
      <!-- <div class="item0"></div> -->
      <div class="dc" :style="'width:'+ current/max*100+'%'"></div>
      <!-- <div :class="showdl(idx)" v-for="(item, idx) in barMax" :key="idx">
      </div> -->
      <!-- <span>{{current}}/{{max}}
      </span> -->
    </div>

    <!-- <div class="item1"></div> -->
  </div>
</template>

<script>
  export default {
    props: {
      current: {
        type: Number,
        default: 0
      },
      max: {
        type: Number,
        default: 100
      },
    },
    data() {
      return {
        barMax: 50
      }
    },
    methods: {
      showdl(idx) {
        if (idx <= (this.current / this.max * this.barMax)) {
          return 'item'
        } else {
          return ''
        }
      }
    },
  }

</script>

<style lang="scss">
  .ElectricProgressBar1 {
    margin-top: 10px;
    display: flex;

    .dc {
      background-image: url("../../../assets/icon_jx.png");
      // background: linear-gradient(270deg, #2B4C71, #396076);
    }

    .pro-w {
      height: 20px;
      background: linear-gradient(270deg, #1D334D, #1A2F46);
      display: flex;
      width: 280px;
      margin-right: 2px;
      overflow: hidden;
    }

    .item0 {
      width: 10px;
      height: 20px;
      background: #FF6D32;
      margin-right: 5px;

    }

    .item {
      background: #2A4A62;
      width: 5px;
      margin-right: 3px;
    }

    .item1 {
      width: 3px;
      height: 20px;
      background: #FF6D32;
    }
  }

</style>
